<!-- 列表 -->
<template>
   <div class="com-container">
        <xszk-header 
            :isLoginShow="isLoginShow"
            @onLogin="isLoginShow=true"
            @onClose="isLoginShow=false"
        ></xszk-header>
        <!-- 搜索 -->
        <div class="index-label">
            <div class="list-main" style="padding-left:24px">
                <ul class="tab-list" v-if="classList.length!=0">
                    <li
                        v-for="(item,index) in classList"
                        :key="index"
                        :class="{'active':item._id==$route.query.id}"
                        @click="toListPage(item)"
                    >{{item.name}}</li>
                </ul>
                <div class="mt15 oh">
                    <div class="seach-warp fl">
                        <input type="text" v-model="seachKey" placeholder="点击输入关键词" class="seach-input fl">
                        <button class="seach-quick fr" @click="quickSearch">快速检索</button>
                    </div>
                    <button class="seach-btn bgfff fl quick-sea" @click="onSeaResult">在结果中搜索</button>
                    <button class="seach-btn cfff bgtheme fl" @click="isSeaPopShow=true">高级检索</button>
                </div>
                <div class="mt25 flex ali-c"> 
                    <el-radio-group v-model="highData.scopeList[0].type" class="index-radio" @change="typeChange">
                        <el-radio label="all">标题或全文</el-radio>
                        <el-radio label="title">标题</el-radio>
                        <el-radio label="text">全文</el-radio>
                        <el-radio label="keyword">关键词</el-radio>
                    </el-radio-group>
                    <div class="radio-line"></div>
                    <el-radio-group v-model="highData.scopeList[0].mode" class="index-radio" @change="vagChange">
                        <el-radio label="exact">精确结果</el-radio>
                        <el-radio label="fuzzy">模糊结果</el-radio>
                    </el-radio-group>
                </div>
            </div>
        </div>
        <div class="list-main">
            <div class="flex ali-c jus-b mt20">
                <div class="flex ali-c">
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="{ path: '/index' }" class="com-crumb">首页</el-breadcrumb-item>
                        <el-breadcrumb-item class="com-crumb">{{secondLvName}}</el-breadcrumb-item>
                    </el-breadcrumb>
                    <div class="ml25 fs14" style="color:#8F8F8F">
                        共找到<span style="color:#F56060;padding:0 5px;">{{currentPage.total}}</span>条结果
                    </div>
                </div>
                <el-radio-group class="list-radio" v-model="radioPrice" @change="changeBuy">
                    <el-radio label="all">全部</el-radio>
                    <el-radio label="free">免费</el-radio>
                    <el-radio label="pay" v-if="token">已购</el-radio>
                </el-radio-group>
            </div>
            <!-- 检索条件 -->
            <div class="jstj-label" v-if="isHighSearch">
                <div class="flex flex1">
                    <div class="fs18 mt10">检索条件</div>
                    <div class="jstj-list">
                        <div
                            v-for="(item,index) in highData.scopeList"
                            :key="index"
                            :class="{'jstj-item':highData.scopeList[0].value}"
                        >   
                            <div v-if="highData.scopeList[0].value" >
                                【{{item.type=='all'?'标题或全文':item.type=='title'?'标题':item.type=='text'?'全文':'关键词'}}】+【{{highData.scopeList[0].mode=='exact'?'精确':'模糊'}}】关键词：{{item.value.length>35?item.value.substring(0,35)+' ...':item.value}}
                                <i class="el-icon-close jstj-del" @click="onWordClose(item,index)"></i>
                            </div>
                        </div>
                        <div v-if="highData.classId!='all'" class="jstj-item">内容品类：{{secondLvName}}<i class="el-icon-close jstj-del" @click="onOtherClose(1)"></i></div>
                        <div v-if="highData.radioVal!='all'" class="jstj-item">{{highData.radioVal=='all'?'全部':highData.radioVal=='free'?'免费':'付费'}}<i class="el-icon-close jstj-del" @click="onOtherClose(2)"></i></div>
                        <div v-if="highData.author" class="jstj-item">作者：{{highData.author}}<i class="el-icon-close jstj-del" @click="onOtherClose(3)"></i></div>
                        <div v-if="highData.local" class="jstj-item">发布单位：{{highData.local}}<i class="el-icon-close jstj-del" @click="onOtherClose(4)"></i></div>
                        <div v-if="highData.time" class="jstj-item">发布时间：{{`${highData.time[0]} 至 ${highData.time[1]}`}}<i class="el-icon-close jstj-del" @click="onOtherClose(5)"></i></div>
                        <div v-if="highData.source" class="jstj-item">内容来源：{{highData.source}}<i class="el-icon-close jstj-del" @click="onOtherClose(6)"></i></div>
                    </div>
                </div>
                <div class="fs16 flex mt10 cp" @click="onClearClose">
                    <div class="jstj-clear">
                        <i class="el-icon-delete fs10 cfff"></i>
                    </div>
                    <div class="ml5 mt2">清空</div>
                </div>
            </div>
            <div class="mt20 flex jus-b">
                <div class="list-wrapfl">
                    <xszk-list-tree
                        v-for="(item,index) in getDataTree"
                        :key="index"
                        :treeData="item"
                        :isSearchNull="isSearchNull"
                        :isHighSearch="isHighSearch"
                        @cateTreeChange="cateTreeChange"
                        @noChildChange="noChildChange"
                    ></xszk-list-tree>
                </div>
                <div class="list-wrapfr">
                    <xszkMainView
                        :dataList="getDataList"
                        :isSearchNull="isSearchNull"
                        :currentPage="currentPage"
                        :keyWord="highData.scopeList"
                        @changeAll="changeAll"
                        @toCollect="toCollect"
                        @toCart="toCart"
                        @changeSort="changeSort"
                        @onSort="onSort"
                        @itemCollect="itemCollect"
                        @toPubDetails="toPubDetails"
                        @handleCurrentChange="handleCurrentChange"
                        @handleSizeChange="handleSizeChange"
                    ></xszkMainView>
                </div>
            </div>
        </div>
        <xszk-high-search
            :isPopShow="isSeaPopShow"
            :currId="$route.query.id"
            @cancelPop="isSeaPopShow=false"
            @comfirmPop="comfirmSeaPop"
        ></xszk-high-search>
        <xszk-fixedTool></xszk-fixedTool>
    </div>
</template>
<script>
import {baseUrl} from '../../http/baseUrl';
export default {
    name: "list",
    components:{
        xszkHeader: (resolve) =>require(["@/components/xszkHeader",], resolve),
        xszkFixedTool: (resolve) =>require(["@/components/xszkFixedTool",], resolve),
        xszkListTree: (resolve) =>require(["@/components/xszkListTree",], resolve),
        xszkMainView: (resolve) =>require(["@/components/xszkMainView",], resolve),
        xszkHighSearch: (resolve) =>require([ "@/components/xszkHighSearch",], resolve),
    },
    computed: {
        getId(){
            return this.$route.query.id;
        },
        classList(){
            return this.$store.getters.classList;
        },
        token(){
            return this.$store.getters.token;
        },
        // isHighNull(){
        //     return this.highData.scopeList[0].value==''&&this.highData.radioVal=='all'&&this.highData.author==''&&this.highData.local==''&&this.highData.time==''&&this.highData.source=='';
        // },
        
    },
    data() {
        return {
            isLoginShow:false,
            secondLvName:'',
            isSeaPopShow:false,
            isHighSearch:false,
            isSearchNull: false,
            seachKey:'',
            highData:{
                scopeVal:'and',
                scopeList:[
                    {type:'all',value:'',mode:'exact'},
                ],
                classId:'all',
                radioVal:'all',
                author:'',
                local:'',
                time:'',
                source:''
            },
            getCategorysId:'', //父id
            getCateChildId:'', //子id
            getFilterCode:'',
            getDataTree:[],
            getDataList:[],
            currentPage: {
                page: 1,
                size: 10,
                total: 0,
            },
            //默认降序
            sortStr:"",
            radioPrice:'all', // all free pay
        };

    },
    methods: {
        toListPage(item){
            if(this.isHighSearch){
                this.$router.push({
                    path:'/list',
                    query: {id:item._id,highData:JSON.stringify(this.stringutils.deepClone(this.highData))}
                })
            }else{
                this.$router.push({path:'/list',query: { id:item._id}});
            }
        },
        toPubDetails(item){
            this.$router.push({path:'/pubDetails',query: {productId:item.book_info.product_id}});
        },
        judgeDataList(){
            if(this.isHighSearch){
                this.getHighSearch();
            }else{
                this.getCategorysList();
            }
        },
        initDataList(){
            this.currentPage.page = 1;
            this.judgeDataList();
        },
        typeChange(val){
            this.highData.scopeList.forEach(item=>{
                item.type = val;
            })
            this.initDataList();
        },
        vagChange(val){
            this.highData.scopeList.forEach(item=>{
                item.mode = val;
            })
            this.initDataList();
        },
        comfirmSeaPop(popForm){
            this.isHighSearch = true;
            this.highData = this.stringutils.deepClone(popForm);
            this.isSeaPopShow = false;
            if(popForm.classId==this.$route.query.id){
                this.initDataList();
            }else{
                this.$router.push({
                    path:'/list',
                    query: {id:popForm.classId,highData:JSON.stringify(popForm)}
                })
            }
        },
        onWordClose(item,index){
            if(this.highData.scopeList.length>1){
                this.highData.scopeList.splice(index,1);
            }else{
                this.highData.scopeList[0].value ="";
            }
            this.initDataList();
        },
        onOtherClose(type){
            switch (type) {
                case 1:
                    this.highData.classId="all";
                    this.$router.push({
                        path:'/list',
                        query: {id:this.highData.classId,highData:JSON.stringify(this.stringutils.deepClone(this.highData))}
                    })
                    this.$router.go(0);
                    break;
                case 2:
                    this.highData.radioVal="all";
                    break;
                case 3:
                    this.highData.author=""; 
                    break;
                case 4:
                    this.highData.local="";
                    break;
                case 5:
                    this.highData.time="";
                    break;
                case 6:
                    this.highData.source="";
                    break;
                default:
                    break;
            }
            this.initDataList();
        },
        onClearClose(){
            this.toast.success("清空成功");
            this.isHighSearch = false;
            this.$router.push({
                path:'/list',
                query: {id:this.$route.query.id}
            })
            this.$router.go(0);
        },
        onSeaResult(){
            if(!this.seachKey){
                this.toast.info("请输入搜索条件");
                return false;
            }
            this.isHighSearch = true;
            this.highData.scopeList.push({type:this.highData.scopeList[0].type,value:this.seachKey,mode:this.highData.scopeList[0].mode});
            this.initDataList();
            this.seachKey = "";
        },
        quickSearch(){
            if(!this.seachKey){
                this.toast.info("请输入搜索条件");
                return false;
            }
            this.isHighSearch = true;
            this.highData.scopeList = [{type:this.highData.scopeList[0].type,value:this.seachKey,mode:this.highData.scopeList[0].mode}];
            this.initDataList();
            this.seachKey = "";
        },
        handleCurrentChange(val){
            this.currentPage.page = val;
            this.judgeDataList();
        },
        handleSizeChange(val){
            this.currentPage.size = val;
            this.judgeDataList();
        },
        // 全部、免费、已购
        changeBuy(val){
            if(val=='pay'){
                this.$router.push('profile/record');
                return false;
            }
            this.currentPage.page = 1;
            if(this.isHighSearch){
                this.highData.radioVal = val;
                this.getHighSearch();
            }else{
                this.radioPrice = val;
                this.getCategorysList();
            }
        },
        changeAll(isAllChecked){
            this.getDataList.forEach(item => {
                item.isCheack = isAllChecked?true:false;
            });
        },
        toCollect(){
            if(this.token){
                console.log(`toCollect`);
                return false;
            }
            this.isLoginShow = true;
        },
        toCart(){
            if(this.token){
                console.log(`toCart`);
                return false;
            }
            this.isLoginShow = true;
        },
        changeSort(val){
            switch (val) {
                case '0':
                    this.sortStr = "";
                    break;
                case '1':
                    this.sortStr = `&order={"发布时间":"desc"}`;
                    break;
                case '2':
                    this.sortStr = `&order={"update_time":"desc"}`;
                    break;
                case '3':
                    this.sortStr = `&order={"price":"desc"}`;
                    break;
                case '4':
                    this.sortStr = `&order={"hot":"desc"}`;
                    break;
                default:
                    break;
            }
            this.initDataList();
        },
        onSort(isInit,val){
            let stsSort = "desc";
            stsSort = isInit?'desc':'asc';
            switch (val) {
                case '1':
                    this.sortStr = `&order={"发布时间":"${stsSort}"}`;
                    break;
                case '2':
                    this.sortStr = `&order={"update_time":"${stsSort}"}`;
                    break;
                case '3':
                    this.sortStr = `&order={"price":"${stsSort}"}`;
                    break;
                case '4':
                    this.sortStr = `&order={"hot":"${stsSort}"}`;
                    break;
                default:
                    break;
            }
            this.initDataList();
        },
        itemCollect(item){
            if(this.token){
                let currStr = `book_id=${item.product_id}&type=${item.book_info.components.type}`;
                this.addCollect(currStr);
                return false;
            }
            this.isLoginShow = true;
        },
        
        cateTreeChange(item){
            this.getDataTree.forEach(treeItem => {
                treeItem.isOpen = (item.pid == treeItem._id)?true:false;
                if(treeItem.childList.length!=0){
                    treeItem.childList.forEach(treeChildItem => {
                        treeChildItem.isOpen = (item.pid == treeChildItem._id)?true:false;
                        if(treeChildItem.childList.length!=0){
                            treeChildItem.childList.forEach(childSonItem => {
                                childSonItem.isOpen = false;
                            });
                        }
                    })
                }
            });
            item.isOpen = true;
            this.getDataTree = this.stringutils.deepClone(this.getDataTree);
            this.getCategorysId = item.index.split(" ")[1];
            this.getFilterCode = item.code;
            this.getCateChildId = item.pid;
            this.initDataList();
        },
        noChildChange(items){
            this.getDataTree.forEach(treeItem => {
                treeItem.isOpen = false;
                if(treeItem.childList.length!=0){
                    treeItem.childList.forEach(treeChildItem => {
                        treeChildItem.isOpen=false;
                        if(treeChildItem.childList.length!=0){
                            treeChildItem.childList.forEach(childSonItem => {
                                childSonItem.isOpen = false;
                            });
                        }
                    })
                }
            })
            items.isOpen = true;
            this.getDataTree = this.stringutils.deepClone(this.getDataTree);
            this.getCategorysId = items.index.split(" ")[1];
            this.getFilterCode = items.code;
            this.getCateChildId = items.pid;
            this.initDataList();
        },
        // 分类导航
        logicData(getCategorysId){
            let that = this;
            if(that.classList.length!=0){
                that.classList.forEach(item => {
                    if(item._id==getCategorysId){
                        document.title = item.name+'-列表';
                        this.secondLvName = item.name;
                    }
                });
            }
        }, 
        loopData(resData,rootArr){
            rootArr.forEach(rootItem => {
                resData.forEach(resItem => {
                    if(rootItem._id == resItem.pid){
                        rootItem.childList.push(resItem);
                    }
                });
                if(rootItem.childList.length>0){
                    rootItem.childList.forEach(childItem => {
                        resData.forEach(resItem => {
                            if(childItem._id == resItem.pid){
                                childItem.childList.push(resItem);
                            }
                            if(childItem.childList.length>0){
                                resData.forEach(resItem => {
                                    childItem.childList.forEach(childItem11 => {
                                        if(childItem11._id == resItem.pid){
                                            childItem11.childList.push(resItem);
                                        }
                                    });
                                });
                            }
                        });
                    });
                }
            });
            return rootArr;
        },
        addCollect(collStr){
            let that = this;
            let data = `${collStr}`;
            this.request.addCollect(data, (res)=> {
                if (res.code == "0") {
                    that.toast.success('收藏成功');
                } else {
                    that.toast.error(res.message);
                }
            });
        },
        //匹配当前分类number值
        getNumList(getCategorysId,getData){
            let that = this;
            let data = {
                type:'column',
                pid: getCategorysId=='all'?'':getCategorysId,
                keyword:this.seachKey,
            };
            this.request.getNavList(data, (res)=> {
                if (res.code == "0") {
                    let resData = res.data;
                    let computList = [];
                    if(getData.length!=0){
                        resData.forEach(resItem => {
                            getData.forEach(treeItem => {
                                if(treeItem.childList.length!=0){
                                    treeItem.childList.forEach((treeChildItem,index) => {
                                        if(treeChildItem._id == resItem._id){
                                            if(resItem.number<=0){
                                                treeItem.childList.splice(index,1)
                                            }
                                            // treeChildItem.number = resItem.number;
                                        }
                                    })
                                }
                            })
                        });
                        getData.forEach(treeItem => {
                            if(treeItem.childList.length!=0){
                                treeItem.childList.forEach(treeChildItem => {
                                    if(treeChildItem.childList.length!=0){
                                        treeChildItem.childList.forEach(lastItem=>{
                                            computList.push({pid:lastItem.pid,code:lastItem.code});
                                        })
                                    }
                                })
                            }
                        });
                        that.getDataTree = that.stringutils.deepClone(getData);
                        if(that.getDataTree.length!=0&&that.getDataTree[0].childList.length!=0){
                            that.getDataTree[0].childList[0].isOpen = true;
                            that.getCategorysId = that.getDataTree[0]._id;
                            if(that.getDataTree[0].childList[0].childList.length!=0){
                                that.getFilterCode = that.getDataTree[0].childList[0].childList[0].isOpen = true;
                                that.getCateChildId = that.getDataTree[0].childList[0].childList[0].pid;
                                that.getFilterCode = that.getDataTree[0].childList[0].childList[0].code;
                                computList.forEach(item => {
                                    that.getSecondNum(item.pid,item.code);
                                });
                                // console.log(computList);
                            }else{
                                that.getCateChildId = that.getDataTree[0].childList[0].pid;
                                that.getFilterCode = that.getDataTree[0].childList[0].code;
                                that.getSecondNum(that.getCateChildId ,that.getFilterCode);
                            }
                            that.initDataList();
                        }
                        console.log(that.getDataTree);
                    }
                } else {
                    that.toast.error(res.message);
                }
            });
        },
        //获取二级number
        getSecondNum(childId,childCode){
            let that = this;
            this.$http({
                method:'GET',
                headers:{
                    PageStart:0,
                    PageOffset:1,
                    ApiToken:this.token,
                },
                url:`${baseUrl.getBaseUrl()}/_md/lib/api/data_categorys/class/books?id=${this.getCategorysId}&name=${this.secondLvName}&category_id=${childId}&cid=${childId}&filter[品类维度编号][0]=${childCode}&price=${this.radioPrice}`,
            }).then(res=>{
                if (res.data.code == "0") {
                    let total = res.data.page.total;
                    that.getDataTree.forEach(treeItem => {
                        treeItem.childList.forEach(treeChildItem => {
                            if(treeChildItem.childList.length!=0){
                                treeChildItem.childList.forEach((treeChild2Item,index)=> {
                                    if(treeChild2Item.code == childCode){
                                        if(total>0&&treeChild2Item.code){
                                            treeChild2Item.number = total;
                                            treeChildItem.number+=treeChild2Item.number; 
                                        }else{
                                            treeChildItem.childList.splice(index,1)
                                        }
                                    }
                                })
                            }else{
                                treeChildItem.number = total;
                            }
                        })
                    });
                } else {
                    that.toast.error(res.data.message);
                }
            });
        },
        //当前分类左侧tree
        getTreeCategorys(){
            let that = this;
            let data = {
                type:'column'
            };
            this.request.getDataCategorys(data, (res)=> {
                if (res.code == "0") {
                    let resData = res.data;
                    let rootArr = [];
                    let getData = [];
                    if(resData.length>0){
                        for (let i in resData) {
                            resData[i].isOpen = false;
                            resData[i].childList = [];
                            resData[i].number = that.getCategorysId!='all'?0:null;
                            if(resData[i].pid =='root'&&resData[i].name!='热点资源'&&resData[i].name!='知识元'){
                                rootArr.push(resData[i])
                            }
                        }
                        if(that.getCategorysId!='all'){
                            getData= that.loopData(resData,rootArr).filter(item=>item._id==that.getCategorysId);
                        }else{
                            getData = that.loopData(resData,rootArr);
                        }
                    }
                    that.getNumList(that.getCategorysId,getData);
                } else {
                    that.toast.error(res.message);
                }
            });
        },
        // 当前分类右侧list
        getCategorysList(){
            let that = this;
            this.$http({
                method:'GET',
                headers:{
                    PageStart:this.currentPage.page-1,
                    PageOffset:this.currentPage.size,
                    ApiToken:this.token,
                },
                url:`${baseUrl.getBaseUrl()}/_md/lib/api/data_categorys/class/books?id=${this.getCategorysId}&name=${this.secondLvName}${this.sortStr}&category_id=${this.getCateChildId}&cid=${this.getCateChildId}&filter[品类维度编号][0]=${this.getFilterCode}&price=${this.radioPrice}`,
            }).then(res=>{
                if (res.data.code == "0") {
                    that.getDataList = [];
                    that.currentPage.total = res.data.page.total;
                    let resData = res.data.data;
                    resData.forEach(item => {
                        item.isCheack = false;
                    });
                    that.getDataList = resData;
                    // console.log(that.getDataList);
                } else {
                    that.toast.error(res.data.message);
                }
            });
        },
        //高级搜索
        getHighSearch(){
            let scopeStr = "";
            this.highData = this.stringutils.deepClone(this.highData);
            if(this.highData.scopeList.length>1){
                for(let i=1;i<this.highData.scopeList.length;i++){
                    scopeStr+= `&appendKeys[${i-1}][type]=${this.highData.scopeList[i].type}&appendKeys[${i-1}][value]=${this.highData.scopeList[i].value}`
                }
            }
            let data = `key[type]=${this.highData.scopeList[0].type}&key[value]=${this.highData.scopeList[0].value}${scopeStr}&keywordcheck=${this.sortStr}
                &keyword[type]=unit&keyword[value]=${this.highData.local}&keyword[type]=author&keyword[value]=${this.highData.author}&filter[品类维度编号][0]=${this.getFilterCode}
                &appendKeysType=${this.highData.scopeVal}&category[cateId]=&category[childId]=&pid=${this.getCategorysId}&cid=${this.getCateChildId}&category_id=${this.getCateChildId}&mode=${this.highData.scopeList[0].mode}
                &time[time_start]=${this.highData.time[0]?this.highData.time[0]:''}&time[time_end]=${this.highData.time[1]?this.highData.time[1]:''}&sources${this.highData.source}&price=${this.highData.radioVal}
            `;
            let that = this;
            this.$http({
                method:'POST',
                headers:{
                    PageStart:this.currentPage.page-1,
                    PageOffset:this.currentPage.size,
                    ApiToken:this.token,
                },
                data: data,
                url:`${baseUrl.getBaseUrl()}/_md/lib/api/data_articles/search_advanced`,
            }).then(res=>{
                if (res.data.code == "0") {
                    that.isHighSearch = true;
                    that.isSeaPopShow = false;
                    that.getDataList = [];
                    let resData = res.data.data;
                    if(resData){
                        if(resData.length>0){
                            that.currentPage.total = res.data.page.total;
                            resData.forEach(item => {
                                item.isCheack = false;
                            });
                            that.getDataList = resData;
                        }else{
                            that.isSearchNull = true;
                        }
                    }else{
                        that.isSearchNull = true;
                    }
                } else {
                    that.toast.error(res.data.message);
                }
            });
        },
        
    },
    mounted(){
       
    },
    created() {
        if(this.$route.query.id){
            this.getCategorysId = this.$route.query.id;
            this.logicData(this.getCategorysId);
            if(this.$route.query.highData){
                this.isHighSearch = true;
                let getHighData = JSON.parse(this.$route.query.highData);
                this.highData =  this.stringutils.deepClone(getHighData);
            }else if(this.$route.query.seachKey){
                this.isHighSearch = true;
                this.highData.scopeList[0].value = this.$route.query.seachKey;
            }
            this.getTreeCategorys();
        }
    },
    watch:{
        getId:{
            handler(newVal,oldVal){
                if(newVal){
                    this.$router.go(0)
                }
            }
        },
        
    }
    
    

};
</script>

<style lang="stylus" scoped>
/deep/.list-radio .el-radio
    margin-left 25px !important
    margin-right 0 !important
.list-main
    width 1200px
    min-height 150px
    margin 0 auto
.index-label
    width 100%
    min-height 225px
    background url('../../static/images/bg.png') no-repeat center
    background-size 100% 100%
    padding-top 40px 
    .seach-warp
        width 763px
        height 60px
        line-height 60px
        background #FFFFFF
        box-shadow 0px 0px 5px 1px rgba(193, 210, 255, 0.5)
        border-radius 4px
        border 1px solid #9EA6AF
        overflow hidden
        .seach-quick
            width 125px
            height 60px
            border-left 1px solid #9EA6AF
            font-size 18px
            cursor pointer
        .seach-input
            width 80%
            height 100%
            flex-shrink 0
            padding-left 15px
            font-size 16px
        /deep/.seach-input::-webkit-input-placeholder 
            font-size 16px;
    .seach-btn
        margin-top 10px
        width 144px
        height 40px
        line-height 40px
        text-align center
        font-size 20px
        border 1px solid transparent 
        border-radius 4px
        margin-left 45px
        transition 0.2s
        cursor pointer
        &.quick-sea
            width 178px
    .seach-btn:hover
        opacity 0.85
    .quick-sea:hover
        border-color #3266CC
        color #3266CC
    .radio-item
        cursor pointer
        font-size 14px
        margin-right 25px
    .radio-line
        flex-shrink 0
        width 1px
        height 20px
        background #979797
        margin-left 13px
        margin-right 30px
    .tab-list
        display flex
        align-items center
        width 100%
        height 30px
        overflow hidden
        li  
            font-size 18px
            color #666
            width 96px
            text-align center
            cursor pointer
            transition 0.2s
            &:hover,&.active
                color #3266CC
                font-weight bolder
                font-size 22px
            &:first-child
                text-align left
                width 50px
.jstj-label
    width 100%
    min-height 70px
    background #FFFFFF
    border-radius 4px
    color #4A4A4A
    padding 15px 35px 0 35px
    display flex
    justify-content space-between
    margin-top 20px
    .jstj-clear
        width 18px
        height 18px
        line-height 18px
        margin-top 4px
        text-align center
        background rgba(50, 102, 204, 0.7)
        border-radius 4px
    .jstj-list
        width 90%
        display flex
        align-items center
        flex-wrap wrap
        margin-left 5px
        .jstj-item  
            position relative
            padding 0 60px 0 15px
            font-size 16px 
            color #4A4A4A
            height 42px
            line-height 42px
            border-radius 4px
            margin-left 25px
            border 1px solid #DDDDDD
            transition 0.2s
            margin-bottom 10px
            .jstj-del
                position absolute
                top 12px
                font-size 18px
                font-weight bolder
                color #3266CC
                right 8px
                cursor pointer
            &:hover
                background #f2f2f2
.list-wrapfl
    width 240px
    height auto
.list-wrapfr
    width 944px
    height auto
</style>